<!--
    p div 标签 内容如果没有空格而是连续的，则不会自动换行的。若想换行，需要加上word-wrap属性。
-->
<html>
    <head>
    </head>
    <body>
        <div id = 'app' style = "float: right; ">
            <button id = 'invoke' width = 100px; height = 200px; onclick = 'alertInfo("hahadddddhahadddddhahadddddhahadddddhahadddddhahaddddd")'>info</button>
            <button id = 'invokeWarm' width = 100px; height = 200px; onclick = 'alertWarm("hahadddddhahadddddhahadddddhahadddddhahadddddhahaddddd")'>warm</button>
            <button id = 'invokeWarm' width = 100px; height = 200px; onclick = 'alertError("hahadddddhahadddddhahadddddhahadddddhahadddddhahaddddd")'>error</button>
        </div>
    </body>

</html>

<script>
    var app = document.getElementById("app");

    function alertInfo(msg) {
        app.appendChild(createDefaultInfo(msg));
    }
    function alertWarm(msg) {
        app.appendChild(createDefaultWarm(msg));
    }
    function alertError(msg) {
        app.appendChild(createDefaultError(msg));
    }

    function createDefaultInfo(msg) {
        return createTip(msg, '400px', '60px', 'green', 'white');
    }

    function createDefaultWarm(msg) {
        return createTip(msg, '400px', '60px', 'yellow', 'black');
    }

    function createDefaultError(msg) {
        return createTip(msg, '400px', '60px', 'red', 'white');
    }

    function createTip(msg, width, minHeight, backColor, fontColor) {
        var div = createDiv(width, minHeight, backColor);
        div.appendChild(createP(msg, fontColor));
        return div;
    }

    function createDiv(width, minHeight, color) {
        var div = document.createElement('div');
        div.style.background = color;
        div.style.width = width;
        div.style.minHeight = minHeight;
        div.style.position = 'relative';
        div.style.textAlign = 'center';
        div.style.marginTop = '10px';
        div.style.borderRadius = '5px';
        div.style.boxShadow = '0px 2px 2px 2px #888888';
        div.style.right = '10px';
        return div;
    }
    function createP(msg, color) {
        var p = document.createElement('p');
        p.style.color = color;
        p.textContent = msg;
        p.style.textAlign = 'center';
        p.style.wordWrap = 'break-word';
        p.style.wordBreak = 'break-all';
        p.style.display = 'inline-block';
        return p;
    }
</script>
